<template>
	<view>
		<tui-input :value="showValue" :label="label" :placeholder="placeholder" :labelColor="labelColor"
			:lineLeft="false" required disabled @click="isShow=true">
			<template slot="right">
				<text class="cuIcon-right text-gray text-xl"></text>
			</template>
		</tui-input>
		<tui-picker :show="isShow" :value="[modelValue]" :pickerData="options" :layer="layer" @change="valueChange"
			@hide="isShow=false"></tui-picker>
	</view>
</template>

<script>
	export default {
		model: {
			event: "change",
			prop: "value"
		},
		props: {
			value: {
				type: String,
				default: null,
			},
			label: {
				type: String,
				default: '字段标题'
			},
			placeholder: {
				type: String,
				default: '请输入...',
			},
			labelColor: {
				type: String,
				default: '#888888'
			},
			options: {
				type: Array,
				default: function() {
					return []
				},
			},
			layer: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				isShow: false, // 显示选择框
				showValue: null, // 显示值
			};
		},
		mounted() {
			this.findSelected();
		},
		watch: {
			modelValue(n, o) {
				this.findSelected();
			},
			options(n, o) {
				this.findSelected();
			}
		},
		computed: {
			modelValue: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('change', val);
				},
			}
		},
		methods: {
			valueChange(e) {
				this.modelValue = e.value || null;
				this.$emit("text", e.text || null);
			},
			findSelected() {
				let item = this.options.find(item => item.value == this.modelValue);
				this.showValue = item && item.text || null;
				this.$emit("text", this.showValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
